<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
				</el-col>
			</el-row>
			<!-- 表格区域 -->
			<tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false"
			:expand-type="false" show-index index-text="#" border :show-row-hover="false">
			<!-- v-slot:isok="scope" 等同于 slot="isok" scope="scope" -->
			<!-- 是否有效列 -->
			<template v-slot:isok="scope">
				<i class="el-icon-success" v-if="scope.row.cat_deleted = 'false'"
				style="color: seagreen;"></i>
				<i class="el-icon-error" v-else style="color: red;"></i>
			</template>
			<!-- 排序列 -->
			<template v-slot:order="scope">
				<el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
				<el-tag v-else-if="scope.row.cat_level === 1" type="success" size="mini">二级</el-tag>
				<el-tag v-else type="warning" size="mini">三级</el-tag>
			</template>
			<!-- 操作列 -->
			<template v-slot:opt="scope">
				<!-- 修改 -->
				<el-button type="primary" icon="el-icon-edit" size="mini" 
				@click="showEditDialog(scope.row.cat_id)">编辑</el-button>
				<!-- 删除 -->
				<el-button type="danger" icon="el-icon-delete" size="mini"
				@click="removeCate(scope.row.cat_id)">删除</el-button>
			</template>
			</tree-table>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pagenum" :page-sizes="[1, 5, 10, 15]" :page-size="queryInfo.pagesize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!-- 添加分类的对话框 -->
		<el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close="addCateDialogClosed">
			<!-- 内容主体区域 -->
			<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="90px">
				<el-form-item label="分类名称:" prop="cat_name">
					<el-input v-model="addCateForm.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="父级分类:">
					<!-- options 用来指定数据源 -->
					<!-- props 用来指定配置对象 -->
					<el-cascader v-model="selectedKeys" :options="parentCateList" 
					:props="cascaderprops" @change="parentCateChanged" clearable></el-cascader>
				</el-form-item>
			</el-form>
			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCate">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑分类的对话框 -->
		<el-dialog title="修改分类" :visible.sync="editDialogVisible" width="50%">
			<!-- 内容主体区域 -->
			<el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="90px">
				<el-form-item label="分类名称:" prop="cat_name">
					<el-input v-model="editCateForm.cat_name"></el-input>
				</el-form-item>
			</el-form>
			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editCate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				// 查询条件
				queryInfo:{
					type:3,
					pagenum:1,
					pagesize:5
				},
				// 商品分类数据列表
				catelist:[],
				// 总数据条数
				total:0,
				// 为Table指定列的定义
				columns:[
					{
						label:'分类名称',
						prop:'cat_name'
					},
					{
						label:'是否有效',
						// 将当前列定义为模板列
						type:'template',
						// 表示当前列的使用模板名称
						template:'isok'
					},
					{
						label:'排序',
						// 将当前列定义为模板列
						type:'template',
						// 表示当前列的使用模板名称
						template:'order'
					},
					{
						label:'操作',
						// 将当前列定义为模板列
						type:'template',
						// 表示当前列的使用模板名称
						template:'opt'
					}
				],
				// 控制添加分类对话框的显示与隐藏
				addDialogVisible:false,
				// 添加分类的表单数据对象
				addCateForm:{
					// 分类名称
					cat_name:'',
					// 父级分类ID
					cat_pid:0,
					// 分类层级 默认为 0（一级分类）
					cat_level:0
				},
				// 添加分类表单的验证规则对象
				addCateFormRules:{
					cat_name:[{
						required: true,
						message: '请输入分类名称',
						trigger: 'blur'
					}]
				},
				// 父级分类的列表
				parentCateList:[],
				// 指定级联选择器的配置对象
				cascaderprops:{
					value:'cat_id',
					label:'cat_name',
					children:'children',
					expandTrigger: 'hover',
					checkStrictly:true
				},
				// 选中的父级分类的ID数组
				selectedKeys:[],
				// 编辑的表单
				editCateForm: {},
				// 对话框的显示与隐藏
				editDialogVisible: false,
				// 编辑表单的校验规则
				editCateFormRules:{
					cat_name:[{
						required: true,
						message: '请输入分类名称',
						trigger: 'blur'
					}]
				}
			}
		},
		created(){
			this.getCateList()
		},
		methods:{
			// 获取商品分类数据
			async getCateList(){
				const { data:res } = await this.$http.get('categories', { params:this.queryInfo })
				if (res.meta.status !== 200) return this.$message.error('获取商品分类失败')
				// console.log(res.data)
				// 把数据列表 赋值给 catelist
				this.catelist = res.data.result
				// 为总数据条数赋值
				this.total = res.data.total
			},
			// 监听 pagesize 改变
			handleSizeChange(newSize){
				this.queryInfo.pagesize = newSize
				this.getCateList()
			},
			// 监听 pagenum 改变
			handleCurrentChange(newPage){
				this.queryInfo.pagenum = newPage
				this.getCateList()
			},
			// 展示添加分类的对话框
			showAddCateDialog(){
				// 先获取父级分类的数据列表
				this.getParentCateList()
				// 展示对话框
				this.addDialogVisible = true
			},
			// 获取父级分类的数据列表
			async getParentCateList(){
				const { data:res } = await this.$http.get('categories', { params:{ type:2 } })
				if (res.meta.status !== 200) return this.$message.error('获取父级分类数据失败')
				// console.log(res.data)
				this.parentCateList = res.data
			},
			// 选择项发生变法触发这个函数
			parentCateChanged(){
				// console.log(this.selectedKeys)
				// 如果 selectedKeys 数组中的 length 大于0 证明选中了父级分类
				if(this.selectedKeys.length > 0){
					// 父级分类的id 列表索引值
					this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
					// 当前分类等级
					this.addCateForm.cat_level = this.selectedKeys.length
				}else{
					// 父级分类的id 列表索引值
					this.addCateForm.cat_pid = 0
					// 当前分类等级
					this.addCateForm.cat_level = 0
				}
			},
			// 点击按钮，添加新的分类
			addCate(){
				// console.log(this.addCateForm)
				this.$refs.addCateFormRef.validate(async valid => {
					if(!valid) return
					const { data:res } = await this.$http.post('categories', this.addCateForm)
					if (res.meta.status !== 201) return this.$message.error('添加分类失败')
					this.$message.success('添加分类成功')
					this.getCateList()
					this.addDialogVisible = false
				})
			},
			// 监听对话框的关闭事件
			addCateDialogClosed(){
				this.$refs.addCateFormRef.resetFields()
				this.selectedKeys = []
				this.addCateForm.cat_pid = 0
				this.addCateForm.cat_level = 0
			},
			// 编辑对话框
			async showEditDialog(id){
				const { data:res } = await this.$http.get('categories/' + id)
				if (res.meta.status !== 200) {
					return this.$message.error('查询分类信息失败')
				}
				this.editCateForm = res.data
				this.editDialogVisible = true
				// console.log(this.editCateForm)
			},
			editCate(){
				this.$refs.editCateFormRef.validate(async valid => {
					if (!valid) return
					const { data:res } = await this.$http.put('categories/' + this.editCateForm.cat_id, {
						cat_name : this.editCateForm.cat_name
					})
					if (res.meta.status !== 200) {
						return this.$message.error('更新分类信息失败')
					}
					this.editDialogVisible = false
					this.getCateList()
					this.$message.success('更新分类信息成功')
				})
			},
			async removeCate(id){
				const result = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (result !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const { data:res } = await this.$http.delete('categories/' + id)
				if (res.meta.status !== 200) {
					return this.$message.error('删除分类失败')
				}
				this.$message.success('删除分类成功')
				this.getCateList()
			}
		}
	}
</script>

<style Lang="less" scoped>
	.treeTable{
		margin-top: 15px;
	}
	.el-cascader{
		width: 100%;
	}
</style>
